<template>
    <div>
        <Tabs type="card">
            <TabPane label="密切在管人员">
                <Table :columns="columns" :data="tableData">

                    <template slot-scope="{ row }" slot="district">
                        <span >{{ row.districtName }}</span>
                    </template>

                    <template slot-scope="{ row }" slot="count">
                        <Input type="text" v-model="editObj.count" v-if="editIndex === index" />
                        <span v-else>{{ row.count }}</span>
                    </template>

                    <template slot-scope="{ row }" slot="action">
                        <div v-if="editIndex === index">
                            <Button @click="handleSave(index)">保存</Button>
                            <Button @click="editIndex = -1">取消</Button>
                        </div>
                        <div v-else>
                            <Button @click="handleEdit(row, index)">操作</Button>
                        </div>
                    </template>
                </Table>
                <div class="submit-button">
                    <i-button type="primary" @click="handleSubmit()">上报</i-button>
                </div>
            </TabPane>
            <TabPane label="传染病专家">
                <Table :columns="columns" :data="tableData">

                    <template slot-scope="{ row }" slot="district">
                        <span >{{ row.districtName }}</span>
                    </template>

                    <template slot-scope="{ row }" slot="count">
                        <Input type="text" v-model="editObj.count" v-if="editIndex === index" />
                        <span v-else>{{ row.count }}</span>
                    </template>

                    <template slot-scope="{ row }" slot="action">
                        <div v-if="editIndex === index">
                            <Button @click="handleSave(index)">保存</Button>
                            <Button @click="editIndex = -1">取消</Button>
                        </div>
                        <div v-else>
                            <Button @click="handleEdit(row, index)">操作</Button>
                        </div>
                    </template>
                </Table>
                <div class="submit-button">
                    <i-button type="primary" @click="handleSubmit()">上报</i-button>
                </div>
            </TabPane>
            <TabPane label="可用房间">
                <Table :columns="columns" :data="tableData">

                    <template slot-scope="{ row }" slot="district">
                        <span >{{ row.districtName }}</span>
                    </template>

                    <template slot-scope="{ row }" slot="count">
                        <Input type="text" v-model="editObj.count" v-if="editIndex === index" />
                        <span v-else>{{ row.count }}</span>
                    </template>

                    <template slot-scope="{ row }" slot="action">
                        <div v-if="editIndex === index">
                            <Button @click="handleSave(index)">保存</Button>
                            <Button @click="editIndex = -1">取消</Button>
                        </div>
                        <div v-else>
                            <Button @click="handleEdit(row, index)">操作</Button>
                        </div>
                    </template>
                </Table>
                <div class="submit-button">
                    <i-button type="primary" @click="handleSubmit()">上报</i-button>
                </div>
            </TabPane>
        </Tabs>

    </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          title: '区县市',
          slot: 'district'
        },
        {
          title: '数量',
          slot: 'count'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 200
        }
      ],
      tableData: [
        {
          districtName: '铁西',
          count: 18
        }, {
          districtName: '和平',
          count: 30
        }
      ],
      editIndex: -1, // 当前聚焦的输入框的行数
      editObj: {
        count: ''
      }
    }
  },
  methods: {
    handleEdit (row, index) {
      this.editVehicleNumber = row.vehicleNumber
      this.editShifts = row.shifts
      this.editCapacityNum = row.capacityNum
      this.editIndex = index
    },
    handleSave (index) {
      this.data[index].vehicleNumber = this.editVehicleNumber
      this.data[index].shifts = this.editShifts
      this.data[index].capacityNum = this.editCapacityNum
      this.editIndex = -1
    },
    handleSubmit () {
      // this.$refs[name].validate((valid) => {
      //   if (valid) {
      //     this.$Message.success('提报成功!')
      //   } else {
      //     this.$Message.error('提报失败!')
      //   }
      // })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style>
    .submit-button{
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 ;
    }
</style>
